.classify-box {
	position: relative;
	display: flex;
	flex-wrap: wrap;

	.classify-left {
		position: relative;
		width: 200rpx;
		height: 100%;
		background-color: #f7f7f7;
		.scroll-view {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
		}
		.item {
			position: relative;
			font-size: 24rpx;
			text-align: center;
			padding: 35rpx 10rpx;
			transition: all 0.3s;
			&::before {
				display: block;
				content: '';
				position: absolute;
				left: 0;
				top: 50%;
				transform: translateY(-50%);
				width: 6rpx;
				height: 0;
				background-color: #d33123;
				border-radius: 0 5rpx 5rpx 0;
				transition: all 0.3s;
			}
		}
		.item.on {
			background-color: #fff;
			color: #d33123;
			&::before {
				height: 80%;
			}
		}
	}

	.classify-right {
		position: relative;
		flex: 1;
		padding: 0 20rpx;
		.scroll-view {
			position: absolute;
			left: 20rpx;
			top: 0;
			right: 20rpx;
			width: calc(100% - 40rpx);
			height: calc(100% - 20rpx);
		}
		.data-box {
			display: flex;
			align-items: center;
			flex-wrap: wrap; 
			background-color: #f7f7f7;
			border-radius: 10rpx;
			padding: 20rpx;
			.item-box {
				width: calc(33% - 10rpx);
				margin-right: 15rpx;
				margin-bottom: 40rpx;
				.img {
					display: flex;
					margin: auto;
					width: 120rpx;
					height: 120rpx;
					border-radius: 10rpx;
				}
				.name {
					text-align: center;
					font-size: 24rpx;
					margin-top: 10rpx;
				}
			}
			.item-box:nth-of-type(3n) {
				margin-right: 0;
			}
		}
	}
}
